<template>
	<view class="px-[16px] bg-[#FFFFFF]">
		<u-form label-width="100px">
			<u-form-item label="持卡人" required>
				<u-input v-model="formData.BankUserName" border="none" placeholder="请填写持卡人"></u-input>
			</u-form-item>
			<u-form-item label="银行卡号" required>
				<u-input v-model="formData.BankCard" border="none" type="number" placeholder="请填写银行卡号"></u-input>
			</u-form-item>
			<u-form-item label="开户行" required>
				<u-input v-model="formData.BankName"  border="none" placeholder="请填写开户行"></u-input>
			</u-form-item>
			<u-form-item label="开户支行">
				<u-input v-model="formData.BankOfName" border="none" placeholder="请填写开户支行"></u-input>
			</u-form-item>
		</u-form>
	</view>
	
	<u-gap height="40"></u-gap>
	<u-button @click="save" text="保存" type="error" size="large" shape="circle" class="mx-[32px]"></u-button>
	
</template>

<script setup>
	import {nextTick, ref, unref} from "vue";
	import * as api from "@/api.js";
	import * as uniapp from "@dcloudio/uni-app";
	import {useUserStore} from "@/store/config.js";
	
	const store = useUserStore();
	const formData = ref({
		BankUserName: '',
		BankName: '',
		BankOfName: '',
		BankCard: ''
	});
	const rules = {
		BankUserName:{
			type: 'string',
			required: true,
			message: '请填写持卡人姓名',
			trigger: 'blur'
		},
		BankName:{
			type: 'string',
			required: true,
			message: '请填写开户行',
			trigger: 'blur'
		},
		BankCard:[{
			type: 'string',
			required: true,
			message: '请填写银行卡号',
			trigger: 'blur',
		},{
			validator: (rule, value, callback) => {
				let regex = /^([1-9]{1})(\d{15}|\d{18})$/;
				return regex.test(value);
			},
			message: '银行卡号不正确',
			// 触发器可以同时用blur和change
			trigger: 'blur',
		}]
	}
	
	uniapp.onLoad(async() => {
		uni.showLoading();
		const result = await api.getBankInfo(store.user.UserID);
		uni.hideLoading();
		console.log(result)
		if(result[0]) {
			formData.value = result[0]
		}
	})
	
	const save = async() => {
		uni.showLoading();
		const result = await api.addBank(store.user.UserID,unref(formData));
		uni.hideLoading();
		await nextTick();
		if(result[1]){
			uni.showToast({
				icon:'none',
				title:result[1]
			})
		} else {
			uni.showToast({
				icon:'success',
				title:'修改成功'
			})
		}
	}

</script>

<style>

</style>
